<template>
  <Draggable id="drag2">
    <div ref="rtc" class="webim-rtc-video">
      <!-- <div class="rtc-narrow">
					<img src="../../../static/img/narrow@2x.png" alt="最小化" @click="minisize" />
				</div> -->

      <div class="rtc-avatar">
        <img src="../../../static/img/avatar-big@2x.png" />
      </div>

      <div class="rtc-text">
        <div>{{ title }}</div>
        <div>{{ text }}</div>
      </div>

      <div class="rtc-control">
        <div :style="{ display: mute_display }">
          <img ref='audio' :src="muteBtnIcon" :isopen="{isopen}"  @click="controlStream('audioControl')" />
          <p>语音</p>
        </div>
        <div>
          <p class="rtc-time" :style="{ display: mute_display }">{{ time }}</p>
          <img src="../../../static/img/hangupCall@2x.png" @click="close" />
          <p>挂断</p>
        </div>
      </div>
      <div class="video corner" :style="{'display':video_display}" ref='localVideo' id="local-player"></div>
      <div class="video full" :style="{'display': video_display}" ref='remoteVideo' id="remote-player"></div>
    </div>
  </Draggable>
</template>

<script>
import "./webrtc.less";
import Draggable from "../draggable";
import WebIM from "../../utils/WebIM";
import microphone from "../../../static/img/microphone@2x.png"
import microphoneMute from "../../../static/img/microphone-mute@2x.png"
import { mapActions, mapGetters } from "vuex";
const rtc = WebIM.rtc;
const AgoraRTC = WebIM.AgoraRTC;
export default {
  data() {
    return {
      full_width: 360,
      full_height: 360,
      toggle_right: 0,
      toggle_top: 0,
      toggle_display: "block",
      close_right: 0,
      close_bottom: 0,
      accept_left: 0,
      accept_bottom: 0,
      accept_display: "block",
      mute_left: 0,
      mute_bottom: 6,
      hasVideo: false,
      localFullRemoteCorner: true,
      showCallVal: false,

      muteBtnIcon: microphone,
      isopen:true
    };
  },

  computed: {
    title() {
      let myName = WebIM.conn.context.jid.name;
      let callerIMName = this.$store.state.agora.confr.callerIMName;
      let calleeIMName = this.$store.state.agora.confr.calleeIMName;
      return callerIMName == myName ? calleeIMName : callerIMName;
    },
    text() {
      const { callStatus } = this.$store.state.agora;
      return callStatus > 4 ? "正在通话中..." : "正在等待对方接受邀请...";
    },
    mute_display() {
      const { callStatus } = this.$store.state.agora;
      let statu = callStatus > 4 ? "block" : "none";
      return statu;
    },
    time() {
      return this.$store.state.agora.callDuration;
    },
    onSetCallStatus() {
      return this.$store.state.agora.callStatus;
    },
    video_display(){
      const { confr } = this.$store.state.agora;
      return (confr.type == 1)?'block': 'none';
    },
  },

  mounted() {
    const { callStatus } = this.$store.state.agora;
    rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    this.addListener();
    if (callStatus == 5 || callStatus == 3) {
      //5 被叫加入
      this.join();
    }
  },

  beforeDestroy() {
    console.log("执行卸载");
    const { callStatus } = this.$store.state.agora;
    if (callStatus != 0) {
      this.hangup();
    }
    this.intervalID && clearInterval(this.intervalID);
  },

  methods: {
    ...mapActions([
      "updateConfr",
      "setCallStatus",
      "hangup",
      "cancelCall",
      "setCallDuration",
      "getRtctoken"
    ]),

    addListener() {
      rtc.client.on("user-published", async (user, mediaType) => {
        console.log("-- 对方发布流 -- ");
        // 开始订阅远端用户。
        await rtc.client.subscribe(user, mediaType);

        // 表示本次订阅的是视频。
        if (mediaType === "video") {
          // 订阅完成后，从 `user` 中获取远端视频轨道对象。
          const remoteVideoTrack = user.videoTrack;

          // 也可以只传入该 DIV 节点的 ID。
          remoteVideoTrack.play("remote-player");
          this.$data.localFullRemoteCorner = false;
        }

        // 表示本次订阅的是音频。
        if (mediaType === "audio") {
          // 订阅完成后，从 `user` 中获取远端音频轨道对象。
          const remoteAudioTrack = user.audioTrack;
          rtc.other = user;
          // 播放音频因为不会有画面，不需要提供 DOM 元素的信息。
          remoteAudioTrack.play();
        }
      });

      rtc.client.on("user-left", () => {
        console.log("-- 对方已离开 --");
        this.hangup();
      });
    },

    async join() {
      console.log("执行join");
      const { confr } = this.$store.state.agora;
      let { channel, token, type } = confr;
      const appId = WebIM.config.AgoraAppId;
      let imUserName = WebIM.conn.context.jid.name;

      let params = {
        username: imUserName,
        channelName: channel,
        appkey: WebIM.conn.appKey,
      };
      const { accessToken,agoraUserId } = await this.getRtctoken(params);
      const uid = await rtc.client.join(
        appId,
        channel,
        accessToken,
        agoraUserId
      );

      // 通过麦克风采集的音频创建本地音频轨道对象。
      rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();

      // 将这些音视频轨道对象发布到频道中。

      let config = [rtc.localAudioTrack];

      if (type === 0) {
        await rtc.client.publish(config);
        // rtc.localAudioTrack.play();
      } else {
        // 通过摄像头采集的视频创建本地视频轨道对象。
        rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
        config.push(rtc.localVideoTrack);
        await rtc.client.publish(config);
        rtc.localVideoTrack.play("local-player");
      }

      console.log("publish success! --- ");
      this.interval();
    },

    async close() {
      const { confr } = this.$store.state.agora;
      rtc.localAudioTrack && rtc.localAudioTrack.close();
      rtc.localVideoTrack && rtc.localVideoTrack.close();
      if (confr.callerIMName === WebIM.conn.context.jid.name) {
        this.cancelCall();
      }
      this.hangup();
      await rtc.client.leave();
    },

    interval() {
      let hour = 0,
        minute = 0,
        second = 0;
      this.intervalID = setInterval(() => {
        second += 1;
        if (second === 60) {
          second = 0;
          minute += 1;
          if (minute === 60) {
            minute = 0;
            hour += 1;
            if (hour == 24) {
              hour = 0;
            }
          }
        }
        let time = this.loadTime(hour, minute, second);
        this.setCallDuration(time);
      }, 1000);
    },
    loadTime(hour, minute, second) {
      const n2s = (n) => {
        let s = "";
        if (n >= 0 && n < 10) {
          s = "0" + n;
        } else {
          s = n + "";
        }
        return s;
      };
      let str = "";
      let hs = n2s(hour),
        ms = n2s(minute),
        ss = n2s(second);
      str = hs == "00" ? ms + ":" + ss : hs + ":" + ms + ":" + ss;
      return str;
    },
    controlStream(type){
        if(type === 'audioControl'){
        	this.$refs.audio.isopen?rtc.localAudioTrack.setEnabled(true):rtc.localAudioTrack.setEnabled(false);
          this.muteBtnIcon = this.$refs.audio.isopen?microphone : microphoneMute

            this.$refs.audio.isopen = !this.$refs.audio.isopen
        }else{
        	this.$refs.video.isopen?rtc.localVideoTrack.setEnabled(true):rtc.localVideoTrack.setEnabled(false);
            this.$refs.video.style.color = this.$refs.video.isopen?'#eeeeee':'#4eb1f4'
            this.$refs.video.isopen = !this.$refs.video.isopen
        }
    }
  },

  components: {
    Draggable,
  },
};
</script>

